<template>

  <div>
    <headers :heatle="title"></headers>

      <div class="vip_year">
        <p>年卡会员</p><img src=""/>
       <div>
          <p>￥198</p>
          <p class="through">原价366</p>
        </div>
      </div>

    <div class="vip_month">
      <p>月卡会员</p>
      <div>
        <p>￥45</p>
      </div>
    </div>


      <div>
        <img src="" alt="">
      </div>
    <div class="vip_bottom">
      <div>
        <p>￥198 <span>原价366</span> </p>
      </div>
      <div class="vip_buy">
        立即开通
      </div>
    </div>
  </div>
</template>

<script>
  import headers from '@/components/headers'
    export default {
        name: "vip",
      components:{
        headers
      },
      data(){
          return{
            title:'vip'
          }
      }
    }
</script>

<style scoped>
.vip_bottom{
  position: absolute;
  bottom: 0;
  height: .56rem;
  width: 100%;
}
  .vip_bottom div{
    width: 50%;
    float: left;
    line-height: .56rem;
  }
  .vip_year, .vip_month{
    height: .4rem;
    border: 1px solid goldenrod;
    width: 90%;
    margin: 0 auto .2rem;
    border-radius: .1rem;
    line-height: .4rem;
    text-align: left;
    padding: 0 .08rem;
    background: #f2f2f2;
  }
.vip_year >div,
.vip_month >div{
  float: left;
}
.vip_year>p,
.vip_month>p
{
  float: left;
}
.vip_year img {
  float: left;
}
.vip_year > div {
  float: right;
  text-align: right;
}
.vip_month > div{
  float: right;
  text-align: right;
}

.vip_year >div p {
  text-align: right;
  font-size: .14rem;
  margin-right: .1rem;
  float: left;
}
 .vip_month >div p{
   text-align: right;
   font-size: .14rem;
   margin-right: .1rem;
 }
  .through{
    text-decoration:line-through;
    font-size: .12rem !important;
    color: #999;
  }
  .vip_buy{
    background: goldenrod;
    font-weight: bold;
  }
</style>
